<template>
  <div class="min-h-[calc(100vh-120px)]">
    <el-main>
      <div class="max-w-1200px mx-auto px-20px">
        <div class="bread-box flex items-center justify-start mb-10px">
          <div class="line-height-20px">当前位置：</div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              :to="{ path: '/demand' }"
              replace
            >需方市场</el-breadcrumb-item>
            <el-breadcrumb-item>需求详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <el-card
          class="info-card rounded-8px h-full flex flex-col"
          shadow="hover"
        >
          <div class="p-10px">
            <div class="text-18px font-bold">{{ info.requirement }}</div>
            <div class="flex items-center justify-start mt-20px">
              <img
                src="@/assets/image/componey.png"
                alt="图片"
                class="w-30px h-30px object-cover"
              >
              <div class="font-bold ml-5px">{{ info.companyName }}</div>
            </div>
            <el-row>
              <el-col :span="12">
                <div class="product-details w-full text-[#4e5969] mt-20px">
                  <div class="label pl-15px relative line-height-30px">行业：{{ info.requirementTypeName }}</div>
                  <div class="label pl-15px relative line-height-30px">分类：{{ info.productTypeName }}</div>
                  <div class="label pl-15px relative line-height-30px">预算：{{ info.budget ? `${info.budget}元` : '需服务商报价' }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="w-full text-[#4e5969] mt-20px">
                  <div class="label pl-15px relative line-height-30px">发布时间：{{ info.publishTime }}</div>
                  <div class="label pl-15px relative line-height-30px">截至时间：{{ info.limitTime }}</div>
                  <div class="label pl-15px relative line-height-30px">联系电话：{{ info.companyPhone }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card
          class="rounded-8px shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] mt-20px"
          shadow="hover"
        >

          <div class="clearfix relative pl-15px mb-20px">
            <h3 class="m-0 text-[#333]">需求详情</h3>
          </div>
          <div
            class="line-height-1.8 mb-15px text-justify text-[#333]"
            v-html="info.requirementDesc"
          ></div>
        </el-card>
      </div>
    </el-main>
  </div>
</template>

<script>
import { getRandomTagType } from "@/utils/tool";
import { getRequirementetail } from "@/api/home";
export default {
  name: "SupplierMarketDetail",
  data() {
    return {
      info: {},
      id: "",
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getData();
  },
  methods: {
    tagType() {
      return getRandomTagType();
    },
    getData() {
      getRequirementetail({requirementId:this.id}).then((res) => {
        this.info = res.data;
      });
    },
  },
};
</script>

<style scoped>
.bread-box {
  display: flex;
  align-items: center;
  justify-content: start;
}

.el-breadcrumb {
  padding: 15px;
  border-radius: 4px;
}

.info-card ::v-deep .el-card__body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #0094de;
  border-radius: 50%;
}

.clearfix:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: #596df4;
  border-radius: 2px;
}
</style>